import React, { useState, useEffect } from "react";
import Tabbar from "@/components/Tabbar";
import './index.scss'
import { fetchCate, fetchItem } from "@/api/home";
import Item from "./item";
import { useNavigate } from "umi";
export default function index() {
  const navigate = useNavigate()
  // 获取分类列表数据
  const [itemLists, setItemLists] = useState([])
  const getItemLists = () => {
    fetchCate().then(res => {
      if (res.data.code === 0) {
        setItemLists(res.data.data)
      }
    })
  }
  // 存储一些点击分类的id
  const [listId, setListId] = useState(72399)
  // 分类详情信息
  const [listDetail, setListdetail] = useState([])
  const getListDetail = () => {
    fetchItem({
      categoryId: listId
    }).then((res: any) => {
      // console.log(res);
      if (res.data.code === 0) {
        setListdetail(res.data.data.result)
      } else if (res.data.code === 700) {
        setListdetail([])
      }

    })
  }
  // 点击商品进入商品闲情页面，并携带id
  const toCateDetail = (id: number) => {
    navigate(`/itemDetail?itemId=${id}`)
  }
  useEffect(() => {
    getListDetail()
  }, [listId])
  useEffect(() => {
    getItemLists()
  }, [])
  return (
    <>
      <div className="itemList">

        <div className="itemLeft">
          {
            itemLists.map((item: any) => (
              <div key={item.id} className={`singerItem ${item.id === listId ? 'active' : ''}`} onClick={() => {
                setListId(item.id);
                console.log(item.id);

              }}>
                {item.name}
                <span className={`${item.id === listId ? 'active' : ''}`}></span>
              </div>
            ))
          }

        </div>
        <div className="itemRight">
          {
            listDetail.length === 0 ?
              <img className="ListImg" src="https://img.zcool.cn/community/0179fa5ab3217da8012182073a66d8.png@1280w_1l_2o_100sh.png" alt="" />
              :
              <Item itemsinger={listDetail} toCateDetail={toCateDetail} fn2={() => {
              }} />
          }
        </div>
      </div>
      <Tabbar />
    </>
  );
}
